<!-- 提交详情页 -->

<template>
<body>
	<view class="content">
		<view class="title">申请集体学习文件</view>
    <image class="image" @click="openImage" :src="imageUrl"></image>
		<view class="title">申请集体学习权限时间</view>
		<view class="section">
			<view class="section__title">开始时间：</view>
				<view class="picker">
					<span class="time"> {{startDate}} </span>
				</view>
		</view>
		<view class="line"></view>
		<view class="section">
			<view class="section__title">结束时间：</view>
				<view class="picker">
					<span class="time"> {{endDate}} </span>
				</view>
		</view>
		<button class="submitBtn" @click="cancelBtn">撤销申请</button>
  </view>
</body>
</template>


<script>
	import request from '../../../common/js/request/learning.js';

	export default {
		
		// 页面数据
		data() {
			return {
				imageUrl: '',
				startDate: '',
				endDate: '',
				userId: '',
			}
		},
		
		// 加载完毕
		onLoad(options) {
			this.allowForCreatReq()
		},
		
		// 页面初次渲染完成
		onReady() {
			// 获取系统信息
			// uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 分享到聊天
		onShareAppMessage() {},

		// 页面事件
		methods: {
			
			// ======================================== 数据处理
			
			// ======================================== 元素事件

			openImage() {
				console.log('click');
			},
			//提交申请
			cancelBtn() {
				this.cancelApplyReq()
			},

			// ======================================== 接口请求

			// 查看申请权限信息
			allowForCreatReq() {
				request.allowForCreat({
					fail: () => {
					},
					success: (res) => {
						// console.log('==详情==', res)
						this.startDate = res.info.start_time,
						this.endDate = res.info.end_time,
						this.imageUrl = res.info.file,
						this.userId = res.info.id
					},
				});
			},
			// 取消申请学习组
			cancelApplyReq(idC) {
				request.cancelApply({
					urlData: {
						id: this.userId, // 学习组id
					},
					fail: () => {
					},
					success: (res) => {
						setTimeout(()=>{
							// 返回上一页
							uni.navigateBack();
						}, 1000);
					},
				});
			},
		},
		
	}
</script>

<style>
	body{
    background-color: #F4F3F8;
	}
  .content{
	  display: flex;
    flex-direction: column;
    align-items: center;
  }
	.title{
		margin: 20rpx 0 30rpx 0;
		font-size: 30rpx;
	}
  .image {
		height: 700rpx;
    max-width: 700rpx;
		max-height: 800rpx;
  }
	.section{
		width: 680rpx;
		height: 80rpx;
    line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #353535;
	}
	.picker{
		display: flex;
		width: 400rpx;
		justify-content: space-between;
	}
	.line{
		width: 680rpx;
		height: 2rpx;
		background-color: #F4F3F8;
	}
	.submitBtn{
		width: 340rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
		background-color: #4A87FD;
		border-radius: 40rpx;
		color: #fff;
	}
	.time{
		min-width: 100rpx;
	}


	.picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
    }
    .item {
        height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
